<template>
  <div id="supplyChain">
    <img
      src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/banner8.jpg"
      class="banner"
    />
    <div class="titletxt">
      <h5>完善的供应链渠道</h5>
      <span>解决企事业单位集中采购困扰</span>
    </div>
    <div class="supplyChain">
      <div class="supplybox">
        <img
          src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/leftsupplyChain.png"
        />
        <div class="rightChain">
          <div class="redrect"></div>
          <p>
            多家企事业单位、大中型企业实行集中采购，必须在指定电商平台进行商品集采，并开具正规发票。江苏铭创整合多家源头供应商，可赋能并合作礼品公司，为实行集中采购的企业提供优质商品。
          </p>
          <div class="modulebox">
            <div style="margin-right: 3.7rem">
              <div style="width: 7.2rem; height: 7.2rem">
                <img
                  src="@/assets/image/icon_chain1.png"
                  style="width: 4rem; height: 4.3rem"
                />
              </div>
              <div style="display: flex; flex-direction: column">
                <span>资金安全</span>
                <span>回款及时</span>
              </div>
            </div>
            <div style="margin-right: 3.7rem">
              <div style="width: 7.2rem; height: 7.2rem">
                <img
                  src="@/assets/image/icon_chain2.png"
                  style="width: 5.1rem; height: 4.7rem"
                />
              </div>
              <div style="display: flex; flex-direction: column">
                <span>资金安全</span>
                <span>回款及时</span>
              </div>
            </div>
            <div>
              <div style="width: 7.2rem; height: 7.2rem">
                <img
                  src="@/assets/image/icon_chain3.png"
                  style="width: 5.5rem; height: 5.2rem"
                />
              </div>
              <div style="display: flex; flex-direction: column">
                <span>资金安全</span>
                <span>回款及时</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="titletxt">
      <h5>仓储物流</h5>
      <span>自建仓储，统一配送</span>
    </div>
    <div class="ckbox">
      <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/ck1.png" />
      <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/ck2.png" />
      <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/ck3.png" />
      <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/ck4.png" />
    </div>
    <div class="footer-top">
      <div class="licence-code">
        <ul class="nav">
          <li>首页</li>
          <li>产品与服务</li>
          <li class="active">供应链</li>
          <li>新闻中心</li>
          <li>关于我们</li>
          <li>联系我们</li>
        </ul>
        <div>
          <h5 class="about-h55">服务热线</h5>
        </div>
        <!-- <div>
          <h5 class="about-h55">企业地址</h5>
          <p class="adress">
            南京总公司：南京市秦淮区光华路海福巷90-1号 南报文创园
          </p>
          <p class="adress">
            徐州分公司：徐州市云龙区和平大道58号万达广场A座12楼
          </p>
          <p class="adress">淮安分公司：淮安市淮阴区南昌北路9号中业慧谷</p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "supplyChain",
};
</script>

<style scoped lang="scss">
#supplyChain {
  .banner {
    width: 100%;
  }
  .titletxt {
    width: 117rem;
    margin: 5.5rem auto 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    h5 {
      font-size: 2.4rem;
      color: #000000;
      line-height: 3.1rem;
      font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }
    span {
      font-size: 1.4rem;
      color: #666666;
      line-height: 1.9rem;
    }
  }
  .supplyChain {
    width: 113.4rem;
    margin: 0 auto;
    .supplybox {
      display: flex;
      align-items: center;
      img {
        width: 53.8rem;
        height: 41.3rem;
      }
      .rightChain {
        width: 67.2rem;
        height: 36.5rem;
        background: #ffffff;
        box-shadow: 0px 3px 11px 0px rgba(230, 230, 230, 0.5);
        margin-left: -8.1rem;
        padding: 2.6rem 0 0 2.5rem;
        .redrect {
          width: 7.1rem;
          height: 0.7rem;
          background: #d31b1b;
          border-radius: 0.4rem;
          margin-bottom: 3.3rem;
        }
        p {
          width: 61.6rem;
          height: 11.3rem;
          font-size: 1.6rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #000000;
          line-height: 2.9rem;
        }
        .modulebox {
          display: flex;

          div {
            display: flex;

            img {
              height: 5.2rem;
            }

            span {
              font-size: 1.6rem;
              font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
              font-weight: 400;
              text-align: left;
              color: #000000;
              line-height: 2.1rem;
            }
          }
        }
      }
    }
  }
  .ckbox {
    display: flex;
    width: 113.4rem;
    margin: 0 auto;
    justify-content: space-between;
    margin-bottom: 21.5rem;
    img {
      width: 27rem;
      height: 27rem;
    }
  }
  .footer-top {
    width: 100%;
    height: 16rem;
    position: relative;
    bottom: 0;
    background: linear-gradient(180deg, #e63f04, #ac0d0d);
    color: #fff;
    .licence-code {
      width: 120rem;
      height: 16rem;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .nav {
        display: flex;
        li {
          font-size: 1.6rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 2rem;
          margin-right: 4.1rem;
        }
        .active {
          font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
          font-weight: 700;
        }
      }

      .about-h55 {
        margin: 0rem 0 1.8rem;
      }

      .licence-h5,
      .QR-code-h5 {
        padding-bottom: 1.6rem;
        border-bottom: 1px solid #fff;
        margin: 2rem 0 1.1rem;
      }

      h5 {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
      }

      .adress {
        margin-bottom: 0.7rem;
        font-size: 1.4rem;
        line-height: 1.9rem;
      }
    }
  }
}
</style>
